<script lang="ts" setup>
import { computed, defineProps } from "vue";
import { ColumnProps } from "@/share/propsType";

    const props = defineProps<{
      list:  ColumnProps[]
    }>();
    
    const columnList = computed(() => {
      return props.list.map((column) => {
        if (!column.avatar) {
          column.avatar = new URL(`../assets/column.jpg`, import.meta.url).href
        }
        return column;
      });
    });
</script>

<template>
  <div class="column-box">
    <div v-for="column in columnList" :key="column._id" class="column">
      <div class="card">
        <div class="card-body">
          <div>
            <img :src="column.avatar" :alt="column.title" />
            <h5 class="card-title">{{ column.title }}</h5>
            <p class="card-text">
              {{
                column.description
                  ? column.description
                  : "栏主很懒，什么都还没有"
              }}
            </p>
            <router-link
              :to="{ name: 'column', params: { id: column._id } }"
              class="btn btn-outline-primary"
              >进入专栏</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/css/common.scss";
.column-box {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 0 0 calc(100% / 3);
  margin-bottom: 20px;
}
.card {
  margin: 0 10px;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}
.card-body {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}
.card img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
}
.card-title {
  margin: 0.2rem 0 0.5rem 0;
}
// 多行省略号
.card-text {
  margin-bottom: 14px;
  line-height: 1.4em;
  height: 2.8em;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
</style>
